<template>
  <div> </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useActivityStore } from '@/stores/activity'
import * as echarts from 'echarts'
import { Promotion, User, Calendar, Star } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const activityStore = useActivityStore()

// 统计卡片数据
const statCards = reactive([
  { title: '活动总数', value: 45, icon: 'Calendar', color: '#2d8cf0' },
  { title: '参与人数', value: 356, icon: 'User', color: '#19be6b' },
  { title: '已完成活动', value: 28, icon: 'Promotion', color: '#ff9900' },
  { title: '收藏活动', value: 15, icon: 'Star', color: '#e46cbb' }
])

// 最新活动数据
const latestActivities = ref([
  { id: 1, name: '校园环保清洁日', status: 1, startTime: '2023-10-15 08:00' },
  { id: 2, name: '敬老院志愿服务', status: 2, startTime: '2023-10-10 09:30' },
  { id: 3, name: '图书馆整理活动', status: 1, startTime: '2023-10-20 14:00' },
  { id: 4, name: '校园文化节志愿者', status: 0, startTime: '2023-10-25 10:00' },
  { id: 5, name: '义务植树活动', status: 1, startTime: '2023-11-01 09:00' }
])

// 通知公告数据
const announcements = ref([
  { id: 1, title: '关于开展2023年秋季志愿者招募的通知', createTime: '2023-09-10 10:30' },
  { id: 2, title: '志愿服务系统升级公告', createTime: '2023-09-08 16:45' },
  { id: 3, title: '优秀志愿者表彰大会通知', createTime: '2023-09-05 14:20' },
  { id: 4, title: '本学期志愿服务时长认证办法', createTime: '2023-09-01 09:15' }
])

// 我的活动数据
const myActivities = ref([
  { id: 1, name: '校园环保清洁日', location: '校园主广场', startTime: '2023-10-15 08:00', endTime: '2023-10-15 11:00', status: 1, isRegistered: true },
  { id: 2, name: '敬老院志愿服务', location: '阳光敬老院', startTime: '2023-10-10 09:30', endTime: '2023-10-10 16:30', status: 2, isRegistered: true },
  { id: 3, name: '图书馆整理活动', location: '学校图书馆', startTime: '2023-10-20 14:00', endTime: '2023-10-20 17:00', status: 1, isRegistered: false },
  { id: 4, name: '校园文化节志愿者', location: '学生活动中心', startTime: '2023-10-25 10:00', endTime: '2023-10-27 18:00', status: 0, isRegistered: false }
])

// 图表实例引用
const activityChart = ref(null)
const evaluationChart = ref(null)

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    0: 'info',    // 未开始
    1: 'success', // 进行中
    2: 'warning', // 已结束
    3: 'danger'   // 已取消
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '未开始',
    1: '进行中',
    2: '已结束',
    3: '已取消'
  }
  return statusMap[status] || '未知'
}

// 查看活动详情
const viewActivity = (activity) => {
  router.push({ path: `/activity/detail/${activity.id}` })
}

// 报名活动
const registerActivity = (activity) => {
  // 调用报名接口
  console.log('报名活动:', activity)
  // 这里应该调用对应的API接口
}

// 取消报名
const cancelRegistration = (activity) => {
  // 调用取消报名接口
  console.log('取消报名:', activity)
  // 这里应该调用对应的API接口
}

// 查看更多活动
const showMoreActivities = () => {
  router.push({ path: '/activity/list' })
}

// 查看更多公告
const showMoreAnnouncements = () => {
  router.push({ path: '/announcement/list' })
}

// 查看我的活动
const showMyActivities = () => {
  router.push({ path: '/user/activities' })
}

// 初始化活动图表
const initActivityChart = () => {
  const chartInstance = echarts.init(activityChart.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '活动数量',
        type: 'bar',
        data: [5, 3, 8, 10, 12, 6, 4, 2, 9, 15, 8, 6],
        itemStyle: {
          color: '#409EFF'
        }
      },
      {
        name: '参与人数',
        type: 'line',
        data: [42, 25, 65, 83, 98, 45, 30, 18, 75, 120, 68, 50],
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  }

  chartInstance.setOption(option)
  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
}

// 初始化评价图表
const initEvaluationChart = () => {
  const chartInstance = echarts.init(evaluationChart.value)

  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '评价分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 48, name: '非常满意', itemStyle: { color: '#67C23A' } },
          { value: 32, name: '满意', itemStyle: { color: '#409EFF' } },
          { value: 15, name: '一般', itemStyle: { color: '#E6A23C' } },
          { value: 5, name: '不满意', itemStyle: { color: '#F56C6C' } }
        ]
      }
    ]
  }

  chartInstance.setOption(option)
  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
}

// 页面加载时获取数据
onMounted(async () => {
  // 获取活动统计数据
  // 获取用户的活动列表
  // 获取公告列表

  // 等待DOM更新完成后初始化图表
  await nextTick()
  initActivityChart()
  initEvaluationChart()
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .el-row {
    margin-bottom: 20px;
  }

  .stat-card {
    height: 120px;
    margin-bottom: 20px;

    .card-content {
      display: flex;
      align-items: center;
      height: 100%;

      .icon-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64px;
        height: 64px;
        border-radius: 8px;
        margin-right: 15px;

        .el-icon {
          font-size: 32px;
          color: white;
        }
      }

      .stat-info {
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          line-height: 1.5;
        }

        .stat-title {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }

  .chart-row {
    margin-top: 20px;
  }

  .chart-card {
    margin-bottom: 20px;

    .chart-container {
      height: 300px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .latest-activities, .announcement, .my-activities {
    margin-bottom: 20px;
  }

  .announcement-item {
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .announcement-title {
      font-size: 14px;
      color: #303133;
      margin-bottom: 5px;
      cursor: pointer;

      &:hover {
        color: #409EFF;
      }
    }

    .announcement-time {
      font-size: 12px;
      color: #909399;
    }
  }
}
</style>
